<template>
	<view class="detail">
		<!-- 轮播图 -->
		<swiper class="swiper" circular indicator-dots autoplay="true" interval="5000" duration="1000">
			<swiper-item v-for="(item,index) in bannerList" :key="index" class="swiper-item" @click="pre(item.pics_mid_url)">
				<image :src="item.pics_mid_url" mode="" class="img"></image>
			</swiper-item>			
	 </swiper>
	 <!-- 详情 -->
	<view class="detail-con">
		<!-- 价格 -->
		<view class="price">
			￥{{detail.goods_price}}
		</view>
		<!-- 标题 -->
		<view class="detail-info">
			<view class="name">
				{{detail.goods_name}}
			</view>
			<!-- 图标 -->
			<!-- star-filled -->
			<uni-icons :type="isStar?'star-filled':'star'" size="30" @click="isStar = !isStar"></uni-icons>

		</view>
		<view class="view">
			快递：免运费
		</view>
		<view class="line"></view>
		<view class="view">
			促销：满30减30
		</view>
		<view class="view">
			已选：s/m
		</view>
		<view class="line"></view>
		
		<!-- tab切换 -->
		<!-- <uni-segmented-control :current="current" :values="['图文详情','规格参数']" @clickItem="onClickItem" styleType="text" activeColor="#c00"></uni-segmented-control> -->
		<!-- 切换的内容 -->
	<!-- 	 <view class="content">
		            <view v-show="current === 0">
		                选项卡1的内容
		            </view>
		            <view v-show="current === 1">
		                选项卡2的内容
		            </view>

		</view> -->
		<!-- 手写tab切换 -->
		<view class="tab">
			<span @click="tab(0)" class="span" :class="{active:currentIndex == 0}">图文详情</span>
			<span @click="tab(1)"  class="span"  :class="{active:currentIndex == 1}">规格参数</span>
			
		</view>
		<view class="content">
			<view class="" v-show="currentIndex == 0">
				<rich-text :nodes="detail.goods_introduce"></rich-text>
			</view>
			<view class="" v-show="currentIndex==1">
				<uni-table>
					<uni-tr v-for="item,index in detail.attrs" :key="index">
						<uni-td>{{item.attr_name}}</uni-td>
						<uni-td>{{item.attr_value}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
			
		</view>
		<!-- 商品导航 -->
		<uni-goods-nav :fill="true" class="footer" :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		
		
		
	</view>
		
	</view>
</template>

<script>
	import {getGoodsDetail} from '@/utils/api.js'
	let app = getApp()
	export default {
		data() {
			return {
				detail:{},//存放接口请求过来的数据
				bannerList:[],//存放轮播图
				isStar:false,
				current: 0,
				currentIndex:0,
				options: [{
							icon: 'headphones',
							text: '客服'
						}, {
							icon: 'cart',
							text: '购物车',
							info: 2
						}],
					    buttonGroup: [{
					      text: '加入购物车',
					      backgroundColor: '#ff0000',
					      color: '#fff'
					    },
					    {
					      text: '立即购买',
					      backgroundColor: '#ffa200',
					      color: '#fff'
					    }
					    ]
			};
		},
		onLoad(options) {
			console.log(options);
			// 请求接口
			getGoodsDetail({goods_id:options.id}).then(res=>{
				console.log(res);
				this.detail = res
				this.bannerList = res.pics
				
			})
			
		},
		methods:{
			pre(pic){
				console.log(pic);
				// 调用图片预览的api
				uni.previewImage({
					current:pic,//当前你预览的图片地址
					urls:this.bannerList.map(item=>item.pics_mid_url)
				})
				
			},
			// tab切换
			  // onClickItem(e) {
			  //     if (this.current != e.currentIndex) {
			  //       this.current = e.currentIndex;
			  //     }
			  //   }
			  tab(index){
				  this.currentIndex = index
				  
			  },
			  onClick (e) {
				  if(e.content.text == '购物车'){
					  uni.switchTab({
					  	url:'../../pages/cart/cart'
					  })
				  }
			  	   
			  	  },
			buttonClick (e) {
			  	if(e.content.text == '加入购物车'){
					// 加入购物车的操作
					// 组合一个对象
					let obj = {
						img:this.detail.goods_small_logo,//图片
						name:this.detail.goods_name,
						id:this.detail.goods_id,
						num:1,
						price:this.detail.goods_price,
						check:false
						
					}
					console.log(app);
					let arr = app.globalData.cartList
					let bool = arr.find(item=>item.id == obj.id)
					if(bool){
						bool.num++
					}else{
						arr.push(obj)
					}
					uni.showToast({
						title:"添加购物车成功"
					})
					app.setBandge()
					// 把arr存到本地
					uni.setStorageSync('cart',arr)
					
				}
			  	    
			 }
		}
	}
</script>

<style lang="scss">
	.swiper{
		width: 100%;
		height: 400rpx;
		.swiper-item{
			width: 100%;
			height: 400rpx;
			.img{
				width: 100%;
				height: 400rpx;
			}
		}
	}
	.detail-con{
		// padding: 10rpx 20rpx;
		background-color: #fff;
		.view{
			padding: 10rpx 20rpx;
			font-size: 28rpx;
		}
		
	}
	.line{
		height: 20rpx;
		background-color: #f5f5f5;
	}
	.detail-info{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		.name{
			font-size: 28rpx;
		}
	}
	.tab{
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.span{
			width: 50%;
			display: inline-block;
			line-height: 80rpx;
			text-align: center;
		}
		.active{
			border-bottom: 2px solid #c00;
			
		}
	}
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

</style>
